<template>
  <div class="container">
    <div class="table-data">
      <el-card class="box-card">
        <el-row
          style="
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <!-- 顶部新增、全选删除 -->
          <el-col :span="10">
            <!-- 新增 -->
            <el-button
              type="warning"
              icon="el-icon-plus"
              size="small"
              @click="richtext"
              >新增</el-button
            >
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deletemore"
              >删除</el-button
            >
          </el-col>

          <!-- 搜索 -->
          <el-col :span="4" :offset="10">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>

        <!-- 添加(富文本编辑器) -->
        <div v-if="EDIshow" class="editorclass">
          <h1 class="title">添加视频</h1>
          <el-form :model="form" class="editorform">
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="视频封面" :label-width="formLabelWidth">
              <!-- <el-input v-model="form.pic" autocomplete="off"></el-input> -->
              <img :src="form.pic" width="100px" style="height:100px"/>
            </el-form-item>
            <!-- 上传文件 -->
            <el-upload
              style="margin: 0 0 30px 120px"
              class="upload-demo"
              ref="uploadpic"
              action="http://api_dev.wanxikeji.cn/api/saveFile"
              :on-preview="handlePreview"
              :on-remove="pichandleRemove"
              :file-list="fileList"
              :auto-upload="false"
              :before-upload="beforeAvatarUpload"
              :on-change="addpic"
              :show-file-list="false"
              :limit="1"
              :on-exceed="limit"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取视频封面</el-button
              >
            </el-upload>

            <el-form-item label="视频地址" :label-width="formLabelWidth">
              <!-- <el-input v-model="form.url" autocomplete="off"></el-input> -->
              <video :src="form.url" controls width="200px"></video>
            </el-form-item>
            <el-upload
              style="margin: 0 0 30px 120px"
              class="upload-demo"
              ref="uploadvideo"
              action="http://api_dev.wanxikeji.cn/api/saveFile"
              :on-preview="handlePreview"
              :on-remove="urlhandleRemove"
              :file-list="fileList"
              :auto-upload="false"
              :before-upload="beforeAvatarUpload"
              :on-change="addvideo"
              :show-file-list="false"
              :limit="1"
              :on-exceed="limit2"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取视频</el-button
              >
            </el-upload>
            <el-form-item label="详细描述" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                style="width: 98%"
                v-model="form.describe"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <!-- 富文本编辑器 -->
          <!--  <editors></editors> -->
          <div class="richbtn">
            <el-button
              type="danger"
              icon="el-icon-edit-outline"
              @click="
                EDIshow = false;
                TABLEshow = true;
              "
              >取消</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              @click="addrichtext"
              >提交</el-button
            >
          </div>
        </div>

        <!-- 修改(富文本编辑器) -->
        <div v-if="EDIchange" class="editorclass">
          <h1 class="title">修改</h1>
          <el-form :model="form" class="editorform">
            <el-form-item label="编号" :label-width="formLabelWidth">
              <el-input
                v-model="changeform.id"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input
                v-model="changeform.title"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="图片封面" :label-width="formLabelWidth">
              <!-- <el-input v-model="changeform.pic" autocomplete="off"></el-input> -->
              <img :src="changeform.pic" width="100px" style="height:100px" v-if="changeform.pic!=''"/>
            </el-form-item>
            <el-upload
              style="margin: 0 0 30px 120px"
              class="upload-demo"
              ref="uploadpic"
              action="http://api_dev.wanxikeji.cn/api/saveFile"
              :on-preview="handlePreview"
              :on-remove="pichandleRemove3"
              :file-list="fileList"
              :auto-upload="false"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-change="addpic"
              :limit="1"
              :on-exceed="limit3"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取视频封面</el-button
              >
            </el-upload>
            <el-form-item label="视频地址" :label-width="formLabelWidth">
              <!-- <el-input v-model="changeform.url" autocomplete="off"></el-input> -->
              <video :src="changeform.url" controls width="200px"></video>
            </el-form-item>
            <el-upload
              style="margin: 0 0 30px 120px"
              class="upload-demo"
              ref="uploadvideo"
              action="http://api_dev.wanxikeji.cn/api/saveFile"
              :on-preview="handlePreview"
              :on-remove="urlhandleRemove"
              :file-list="fileList"
              :auto-upload="false"
              :before-upload="beforeAvatarUpload"
              :on-change="addvideo"
              :limit="1"
              :on-exceed="limit"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取视频</el-button
              >
            </el-upload>
            <el-form-item label="视频描述" :label-width="formLabelWidth">
              <el-input
                style="width: 98%"
                v-model="changeform.describe"
                type="textarea"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <!-- 富文本编辑器 -->
          <!-- <editors></editors> -->

          <div class="richbtn">
            <el-button
              type="danger"
              icon="el-icon-edit-outline"
              @click="offchangetext"
              >取消</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              @click="changetext"
              >提交</el-button
            >
          </div>
        </div>

        <!-- 表单数据（增、删、改、禁） -->
        <el-table
          v-if="TABLEshow"
          :data="dataShow"
          stripe
          border
          @selection-change="selectionchange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="编号" prop="video_id"> </el-table-column>
          <el-table-column label="标题" prop="title"> </el-table-column>
          <!-- <el-table-column label="故事内容" prop="info"> </el-table-column> -->
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                @click="forbiddendata(scope.$index, scope.row)"
                >{{ scope.row.status == 1 ? "禁用" : "启用" }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div v-if="TABLEshow">
          <el-pagination
            style="margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import editors from "../wangeditor";
export default {
  data() {
    return {
      token: "",
      EDIshow: false,
      TABLEshow: true,
      EDIchange: false,
      namesearch: "",
      videourl: "",
      form: {
        id: "",
        title: "",
        url: "",
        describe: "",
        pic: "",
      },
      changeform: {
        id: "",
        title: "",
        url: "",
        describe: "",
        pic: "",
      },
      dataShow: [],
      alldataShow: [],
      formLabelWidth: "120px",
      count: 0,
      currentPage: 1,
      pageSize: 10,
      moment: [],
      deleteall: [],
      changearr: [],
      indexnum: 0,
      fileList: [],
      piclist: [],
      file: null,
    };
  },

  components: {
    editors,
  },

  methods: {
    limit(files, fileList) {
      this.pichandleRemove(files, fileList);
      let formDatas = new FormData();
      formDatas.append('file', files["0"]);
      this.$http.post('/api/saveFile', formDatas).then(res => {
        if (res.data.code == 2000) {
          this.form.pic = "http://api_dev.wanxikeji.cn/" + res.data.data;
          this.changeform.pic = "http://api_dev.wanxikeji.cn/" + res.data.data;
        }
      })
    },
    limit2(files, fileList) {
      this.$message({
        message: "只能上传一个文件，请删除后重试",
        type: "error",
      });
    },
    limit3(files, fileList) {
      this.pichandleRemove3(files, fileList);
      let formDatas = new FormData();
      formDatas.append('file', files["0"]);
      this.$http.post('/api/saveFile', formDatas).then(res => {
        if (res.data.code == 2000) {
          this.form.pic = "http://api_dev.wanxikeji.cn/" + res.data.data;
          this.changeform.pic = "http://api_dev.wanxikeji.cn/" + res.data.data;
        }
      })
    },
    addvideo(file) {
      this.file = file.raw;
      console.log(file.raw);
      this.submitUpload();
    },
    addpic(file) {
      this.file = file.raw;
      this.picsubmitUpload();
    },
    beforeAvatarUpload(file) {
      this.file = file;
    },
    //上传视频封面
    picsubmitUpload() {
      let formData = new FormData();
      // formData.append("paramId", 1);

      formData.append("file", this.file);
      this.$http.post("/api/saveFile", formData).then((res) => {
        if (res.data.code == 2000) {

          this.form.pic = "http://api_dev.wanxikeji.cn/" + res.data.data;
          this.changeform.pic = "http://api_dev.wanxikeji.cn/" + res.data.data;
          this.$message({ message: res.data.msg, type: "success" });
        } else {
          this.$message({ message: res.data.msg, type: "error" });
          this.form.pic = ""
          this.changeform.pic = ""
        }
      });
    },
    //上传视频
    submitUpload() {
      let formData = new FormData();
      // formData.append("paramId", 1);

      formData.append("file", this.file);
      this.$http.post("/api/saveFile", formData).then((res) => {
        if (res.data.code == 2000) {
          console.log(res.data);
          // this.videourl=""
          this.form.url = "http://api_dev.wanxikeji.cn/" + res.data.data;
          this.changeform.url = "http://api_dev.wanxikeji.cn/" + res.data.data;
          this.$message({ message: res.data.msg, type: "success" });
        } else {
          this.$message({ message: res.data.msg, type: "error" });
          this.form.url = ""
          this.changeform.url =""
        }
      });
    },

    // pichandleRemove() {
    //   this.form.pic = "";
    //   this.changeform.pic = "";
    // },
    pichandleRemove(val, vals) {
      vals.splice(vals.length - 1, 1)
    },
    pichandleRemove3(val, vals) {
      vals.splice(vals.length - 1, 1)
    },
    urlhandleRemove() {
      this.form.url = "";
      this.changeform.url = "";
    },
    handlePreview(file) {},

    richtext() {
      this.EDIchange = false;
      this.EDIshow = true;
      this.TABLEshow = false;
    },

    // 取消添加作品内容
    offrichtext() {
      this.EDIshow = false;
      this.TABLEshow = true;
    },

    // 添加作品内容-富文本
    addrichtext() {
      // this.picsubmitUpload();
      // this.submitUpload();
      // console.log(this.from.url)
      // 获取token
      let token = sessionStorage.getItem("token");
      // 获取title
      let title = this.form.title;
      let describe = this.form.describe;
      let pic = this.form.pic;
      // 获取info
      let url = this.form.url;
      let info = localStorage.getItem("info");

      // console.log("title->",title,"info->",info);

      // 通过接口添加数据
      this.$http
        .post("/api/admin/videoAddModify", {
          token: token,
          title: title,
          url: url,
          describe: describe,
          pic: pic,
        })
        .then((res) => {
          // console.log("添加数据-->", res);
          // 渲染数据
          let type = "error";
          if (res.data.code == 2000) {
            type = "success";
            this.EDIshow = false;
            this.TABLEshow = true;
          }
          this.$message({ message: res.data.msg, type: type });
          this.show(this.pageSize, this.currentPage);
        });
    },

    // 取消修改作品内容
    offchangetext() {
      this.EDIchange = false;
      this.TABLEshow = true;
    },

    // 提交修改
    changetext() {
      this.$http
        .post("/api/admin/videoAddModify", {
          token: this.token,
          title: this.changeform.title,
          url: this.changeform.url,
          id: this.changeform.id,
          pic: this.changeform.pic,
          describe: this.changeform.describe,
        })
        .then((res) => {
          let type = "error";
          if (res.data.code == 2000) {
            type = "success";
            this.EDIchange = false;
            this.TABLEshow = true;
          }
          this.$message({ message: res.data.msg, type: type });
          this.show(this.pageSize, this.currentPage);
        });
      // 获取token
    },

    // 添加作品数据
    addwork() {},

    // 刷新
    refresh() {
      this.namesearch = "";
    },

    // 搜索数据
    searchdata() {},

    // selection删除
    selectionchange(value) {
      // console.log("selectionchange->value->", value);
      this.deleteall = value;
      // console.log("this.deleteall->", this.deleteall);
    },

    // 删除多条数据
    deletemore() {
      let ifreq = 0;
      // 渲染数据
      let count = this.deleteall.length;

      this.deleteall.forEach((item) => {
        this.$http
          .post("/api/admin/videoDelete", {
            token: this.token,
            id: item.video_id,
          })
          .then((res) => {
            ifreq++;

            if (ifreq == count) {
              this.show(this.pageSize, this.currentPage);
            }
            let type = "error";
            if (res.data.code == 2000) {
              type = "success";
            }
            this.$message({ message: res.data.msg, type: type });
          });
      });
    },

    // 信息修改
    handleEdit(index, row) {
      console.log(row);
      // 数据索引
      this.changeform.id = row.video_id;
      this.EDIchange = !this.EDIchange;
      this.TABLEshow = !this.TABLEshow;
      this.changeform.title = row.title;
      this.changeform.pic = row.pic;
      this.changeform.url=row.url;
      this.changeform.describe = row.describe;
    },

    // 删除单条数据
    handleDelete(index, row) {
      this.$http
        .post("/api/admin/videoDelete", { token: this.token, id: row.video_id })
        .then((res) => {
          let type = "error";
          if (res.data.code == 2000) {
            type = "success";
          }
          this.$message({ message: res.data.msg, type: type });
          this.show(this.pageSize, this.currentPage);
        });
    },

    // 分页器

    handleSizeChange(e) {
      this.pageSize = e;
      this.show(e, 1);
    },
    //当前页变化
    handleCurrentChange(e) {
      // 多选
      this.show(this.pageSize, e);
    },
    handleSelectionChange(e) {
      //   console.log(e);
      this.checkedrow = e;
      //   console.log(this.checkedrow)
    },

    // 作品禁用按钮
    forbiddendata(index, row) {
      this.$http
        .post("/api/admin/videoBan", { token: this.token, id: row.video_id })
        .then((res) => {
          this.show(this.pageSize, this.currentPage);
        });
      // 获取token
    },

    // 渲染数据
    show(size, page) {
      let token = sessionStorage.getItem("token");
      this.token = token;
      // 通过接口获取作品数据
      this.$http
        .post("/api/admin/videoList", {
          token: token,
          page: page,
          size: size,
        })
        .then((res) => {
          this.count = res.data.data.count;
          this.dataShow = res.data.data.data;
          console.log(this.dataShow);
        });
    },
  },

  // 监听搜索框状态
  watch: {
    namesearch: {
      handler: function (newVal, oldVal) {
        // 修改radio
      },
      deep: true,
    },
    namesearch: {
      handler: function (newVal, oldVal) {},
      deep: true,
    },
  },

  mounted() {
    //渲染页面
    this.show(10, 1);
  },
};
</script>

<style lang="less" scoped>
//
.top-btn {
  display: flex;
}
.el-icon-refresh-left {
  display: flex;
  align-items: center;
}
.el-table .white {
  background: white;
}
.el-table .blue {
  background: rgb(18, 191, 235);
}
.el-table .red {
  background: rgb(236, 92, 66);
}
.el-table .purple {
  background: rgb(230, 108, 179);
}
.editorclass {
  padding: 0 50px 0 0;
}
.editorform {
  display: flex;
  // justify-content: flex-start;
  flex-direction: column;
}
.txtarea {
  width: 98%;
}
.title {
  display: flex;
  justify-content: center;
}
.richbtn {
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
// 公共table
/deep/.el-table__body-wrapper {
  font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data {
    padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-form-item__label {
    width: 80px !important;
  }
  /deep/.el-input {
    width: 98%;
  }
}
</style>
